
<template>
  <div class="card-loop">
    <transition-group>
      <div v-for="(item, idx) in loopModules" :key="idx" class="loop-item" :style="item.style" @click="handleLoop(idx)">
        <img :src="baseData[idx].cover" :alt="baseData[idx].cover" />
      </div>
    </transition-group>
  </div>
  <AplidDialog v-model="visible" width="60%">
    <TabCheck v-model="activeName" :tabs="tabList" :showLabel="false"></TabCheck>
  </AplidDialog>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  ref,
} from "vue";
import loop1 from "@/assets/imgs/icon-hom3/loop1.jpg";
import loop2 from "@/assets/imgs/icon-hom3/loop2.jpg";
import loop3 from "@/assets/imgs/icon-hom3/loop3.jpg";
import loop4 from "@/assets/imgs/icon-hom3/loop4.jpg";
import loop5 from "@/assets/imgs/icon-hom3/loop5.jpg";
import TabCheck from '@/views/aplid/TabCheck/index.vue'

let visible = ref(false)
const activeName = ref(0);
const tabList = ref([]);
// const findIdxById = (arr, id) => {
//   for (let i = 0; i < arr.length; i++) {
//     if (arr[i] === id) {
//       return i;
//     }
//   }
//   return -1;
// };

// 轮播数据
const baseData = ref([
  {
    title: '标题1',
    cover: loop1,
  },
  {
    title: '标题2',
    cover: loop2,
  },
  {
    title: '标题3',
    cover: loop3,
  },
  {
    title: '标题4',
    cover: loop4,
  },
  {
    title: '标题5',
    cover: loop5,
  },
])
// 轮播样式模板，用来循环赋值给容器
let loopModules = ref([
  {
    loopIdx: 0,
    style: {
      'z-index': 7,
      background: '#fff',
      transform: `scale(${1})`,
      left: 'calc(100% / 5 * 0)',
      opacity: 0.8,
    },
  },
  {
    loopIdx: 1,
    style: {
      'z-index': 8,
      transform: `scale(${1.4})`,
      background: '#fff',
      left: 'calc(100% / 5 * .9)',
      opacity: 0.9,
    },
  },
  {
    loopIdx: 2,
    style: {
      transform: `scale(${1.7})`,
      'z-index': 9,
      background: '#fff',
      left: 'calc(100% / 5 * 2)',
      opacity: 1,
      'box-shadow': '0 0 5px #ccc',
    },
  },
  {
    loopIdx: 3,
    style: {
      transform: `scale(${1.4})`,
      'z-index': 8,
      background: '#fff',
      left: 'calc(100% / 5 * 3.1)',
      opacity: 0.9,
    },
  },
  {
    loopIdx: 4,
    style: {
      'z-index': 7,
      transform: `scale(${1})`,
      background: '#fff',
      left: 'calc(100% / 5 * 4)',
      opacity: 0.8,
    },
  },
])

// 当前展示项
let loopCenterIdx = ref("2");

// 初始化轮播
const initLoop = () => {
  // console.log(loopModules.value, 'loopModules');
  if (loopModules.value) {
    loopModules.value = loopModules.value.map((item, idx) => {
      return item;
    });
  }

}

// 下一张
const handleNext = () => {
  loopCenterIdx.value = loopCenterIdx.value + 1 > 4 ? 0 : loopCenterIdx.value + 1;
  loopModules.value = loopModules.value.map((item, idx) => {
    return item;
  });
  loopModules.value.unshift(loopModules.value.pop());
}

// 上一张
const handleLast = () => {
  loopCenterIdx = loopCenterIdx - 1 < 0 ? 4 : loopCenterIdx - 1;
  loopModules.value = loopModules.value.map((item, idx) => {
    return item;
  });
  loopModules.value.push(loopModules.value.shift());
}

// 点击容器
const handleLoop = (checkId) => {
  stopAutoPlay(); // 点击时停止自动轮播
  setTimeout(startAutoPlay, 3000); // 3秒后重新开始自动轮播

  // 当前项
  console.log(checkId, '///', baseData.value);

  // 构造二级弹窗数据
  tabList.value = baseData.value.map((item, index) => {
    item.value = index
    item.icon = item.cover
    return { value: item.value, icon: item.icon }
  })
  activeName.value = checkId
  // 开启弹窗
  visible.value = true


  if (checkId == loopCenterIdx) {
    return;
  }

  if (checkId > loopCenterIdx) {
    if (loopCenterIdx === 0 && checkId === 4) {
      return handleLast(checkId);
    } else {
      return handleNext(checkId);
    }
  }

  if (checkId < loopCenterIdx) {
    if (checkId === 0 && loopCenterIdx === 4) {
      return handleNext(checkId);
    } else {
      return handleLast(checkId);
    }
  }
}

// 自动轮播
let autoPlay = null;
const startAutoPlay = () => {
  autoPlay = setInterval(() => {
    handleNext();
  }, 3000); // 设置间隔时间为3秒
};

// 停止自动轮播
const stopAutoPlay = () => {
  if (autoPlay) {
    clearInterval(autoPlay);
  }
};

onMounted(() => {
  initLoop()
  startAutoPlay(); // 启动自动轮播
  console.log('生命周期----onMounted')
})
onUnmounted(() => {
  stopAutoPlay(); // 组件卸载时停止自动轮播
});
</script>

<style lang="scss" scoped>
// .fade-enter-active,
// .fade-leave-active {
//   transition: all 0.5s ease;
// }

// .fade-enter-from,
// .fade-leave-to {
//   opacity: 0;
//   transform: scale(0.8);
// }

.card-loop {
  width: 100%;
  margin-top: 70px;
  position: relative;

  .loop-item {
    width: calc(100% / 5);
    float: left;
    box-sizing: border-box;
    position: absolute;
    transition: all ease-out 0.5s;
    transform-origin: 50% 50%;

    img {
      width: 100%;
    }

    div {
      background: #fff;
      padding-bottom: 5px;
    }

    p.title {
      // padding: 3px;
      color: #333;
      // font-weight: bolder;
      transform: scale(0.9);
    }

    p.content {
      font-size: 6px;
      color: #999;
      overflow: hidden;
      display: -webkit-box; //将元素设为盒子伸缩模型显示
      -webkit-box-orient: vertical; //伸缩方向设为垂直方向
      -webkit-line-clamp: 2; //超出2行隐藏，并显示省略号
      transform: scale(0.9);
    }

    p.tool {
      text-align: center;
      transform: scale(0.7);
    }
  }
}
</style>